<template>
    <div class="">
      <Card style="width:100%" class="detail-content-layout mb16">
        <template #title>
          {{$t('安灯信息')}}
        </template>
        <transition name="slide-up">
          <div>
            <div class="search-box-layout noBg noPad">
              <Row :gutter="24">
                <Col span="8">
                  <div>
                    <p class="label">{{$t('Andon事件号')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.andonNo" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('工站')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.workstation" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('操作人')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.operator" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('生产订单编号')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.productionOrderNo" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('工作中心')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.workCenter" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('物料')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.material" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('问题类型')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.issueType" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('原因代码')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.reasonCode" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('原因描述')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.reasonDesc" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('事件触发时间')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.issueTime" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('说明')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.comment" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
                <Col span="8">
                  <div>
                    <p class="label">{{$t('安灯状态')}}</p>
                    <div class="ipt">
                      <Input disabled clearable type="text" v-model="form.mesStatus" :placeholder="''" ></Input>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </transition>
      </Card>
      <Card style="width:100%" class="detail-content-layout ">
        <template #title>
          {{$t('安灯历史')}}
        </template>
        <div>
          <Timeline>
            <TimelineItem :color="item.color" v-for="(item,index) of form.recordList" :key="index">
              {{item.createTime}}
              <p v-for="(m,mindex) of item.msgArr" :key="mindex">{{m}}</p>
            </TimelineItem>
          </Timeline>
        </div>
      </Card>
    </div>
</template>

<script>


export default {
    name: "orderDetailModal",
    components: {

    },
    props: ['idF'],
    data() {
        return {
          id:this.idF,
          form:{
            name:""
          }
        }
    },
    created() {

      this.getDetail()
    },
    methods: {
      getDetail(){
        this.axios({
          method: 'get',
          url: '/dms/andonTask/findDetailById',
          params: {
            id:this.id
          }
        }).then(res => {
          if (res.code === 200) {
            this.form = res.data

            this.form.operator = res.data.operatorNo + '-' + res.data.operator
            for(let item of this.form.recordList){
              if(item.eventType===0){
                item.color = 'red'
              }
              if(item.eventType===1){
                item.color = 'green'
              }
              if(item.eventType===2){
                item.color = 'blue'
              }
              item.msgArr = item.msg.split('\n')
            }
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        })
      },
      backPage(){
        this.$router.go(-1)
      },
    }
}
</script>

<style scoped lang="scss">
.btnEle {
    text-align: center;
    margin-top: 20px;
}

.dateform {
    margin-top: 4px;
}

::v-deep .ivu-icon-md-add {
    font-size: 20px;
}

::v-deep .ivu-rate-star {
    &::before {
        font-size: 30px;
    }
}

.icon {
    cursor: pointer;

    &:first-child {
        margin-right: 20px;
    }
}

.basic-info {
    ::v-deep .ivu-select-selection {
        border: none;
    }

    .basic-info-title {
        span {
            display: inline-block;
            width: 7px;
            height: 24px;
            background: #187bdb;
        }

        h2 {
            display: inline-block;
            font-size: 16px;
            padding-left: 16px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: -2px;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
        }
    }

    .basic-info-body {
        //margin: 15px 10px;
        color: #333;
        font-size: 13px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        border-left: 1px solid #eee;

        .editWrap {
            position: relative;

            .editTime {
                position: absolute;
                cursor: pointer;
                right: 10px;
                top: 0;
                color: #187bdb;
                font-size: 14px;

                .icon {
                    font-size: 30px;
                    vertical-align: middle;
                }
            }
        }

        .basic-info-body-label {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            background: #f5f6f7;
            text-align: right;
            padding-right: 10px;
            /*border-left: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }

        .basic-info-body-item {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            text-align: left;
            padding: 0 10px;
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;

            .preview {
                position: absolute;
                right: 10px;
                top: 0;
                width: 40px;
                height: 40px;
                background: #eee;

                .preview-img {
                    width: 40px;
                    height: 40px;
                    overflow: hidden;
                }
            }

            ::v-deep .ivu-upload-drag {
                display: flex;
                height: 40px;

                button {
                    margin-top: 4px;
                }
            }

            .fileWrap {
                flex: 1;
                display: flex;
                overflow-y: scroll;
                flex-direction: column;

                &::-webkit-scrollbar {
                    width: 4px;
                }

            }

            .file-list {
                padding-left: 20px;
            }
        }
    }

    .file-style {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #187bdb;
        cursor: pointer;
    }
}

.over-wrapper {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/deep/ .ivu-upload-drag:hover {
    border: none;
}

/deep/ .ivu-upload-drag {
    border: none;
}
</style>
